<template>
  <div class="goodslit">

     <router-link :to="'/home/goodslist/goodsinfo/'+item.id" class="goods-item" v-for="(item, index) in shoplist" :key="index" tag="div">
      <img :src="item.litpic" alt>
      <h3 class="goods-title">{{item.title}}</h3>
      <div class="info">
        <div class="pice">
          <span class="nowpice">￥{{item.price}}</span>
          <span class="old">原价:￥{{item.trueprice}}</span>
        </div>
        <div class="sell">
          <span>热卖中</span>
          <span>还{{item.units}}件</span>
        </div>
      </div>
    </router-link>
   
  </div>
</template>

<script>
export default {
  data() {
    return {
      shoplist: [],
      page:1,
      count:0,

    };
  },
  mounted: function() {

  },
  methods: {
    getgoodlist(){
      this.$http.get("http://192.168.0.104/linshi/api/get_shoplist.php?typid=8&page=" + this.page).then((res) => {
        
       if(res.status ==200){
         this.count=res.body.count;
         if(this.shoplist.length<1){
           this.shoplist=res.body.list;
         }else{
           this.shoplist=this.shoplist.concat(res.body.list)
         }
         if(this.shoplist.length==parseInt(this.count)){ 
           this.flag=false;
           this.flag1=true;
           }else{
            this.flag=true
           }
        console.log(res)
       }
          
        
      });
    }
  },
  components: {},
  created() {
    this.getgoodlist()
    this.$emit("changTit",true,'商品列表');
  }
};
</script>

<style lang="scss" scoped>
.goodslit {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 6px;
  .goods-item {
    width: 49%;
    border: 1px solid #ccc;
    box-shadow: 0 0 8px #ccc;display: flex;
    margin: 4px 0;padding:2px;flex-direction: column;justify-content:space-between;min-height:230px;
    img {
      width: 100%;
    }
    .goods-title {
      font-size: 14px;
    }
    .info {
      background: #eee; font-size: 12px;
      .pice{
        .nowpice{font-size: 16px;color: red;font-weight: bold}
        .old{text-decoration: line-through;}
      }
      .sell{display: flex;justify-content:space-between;}
    }
  }
}
</style>
